<%@ include file="/WEB-INF/jsp/include.jsp"%>
<html>
<head>
<link type="text/css" rel="stylesheet" media="all"
	href="./jquery-ui-1.8.9.custom.css" />
<script type="text/javascript" src="./jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="./jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="./header.js"></script>
<script type="text/javascript" src="./jquery.validate.js"></script>
<script type="text/javascript" src="./jquery.cookie.js"></script>
<script type="text/javascript" src="./cookie-service.js"></script>
<script type="text/javascript" src="./auto-complete.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="./simple.css" />
<script type="text/javascript">
	var locations;
	$(document).ready(function() {
		$("#form1").validate({
			rules : {
				cName : "required",// simple rule, converted to {required:true} 
				hq : "required",
				industry : "required",
				location : "required"
			}
		});
		

		setAutoComplete([ 'hqId', 'location', 'industryId', 'industry' ]);
		setTimeout(function(){
			createLocations();
			},500);
	});
	
	function addCompany(){
	$('.result').remove();
		$.post( 'addCompanyD.htm', $('form#form1').serialize(), function(data) {
		    		var obj = $.parseJSON(data);
					
					var divElement = document.getElementById("resultSpan");
					var element = document.createElement("div");
					element.setAttribute("class","result");
					var textNode;
					if(obj['success'] === true){
						textNode = document.createTextNode("Company Added");
					} else {
						textNode = document.createTextNode("Company not added,failure reason :" + obj['failureReason']);
					}
					divElement.appendChild(textNode);
					divElement.appendChild(element);
		       }
		    );
		
	}

	function createLocations() {
		var locElement = document.getElementById("locationId");
		var locations = getCookie('location').split(",");
		for (i = 0; i < locations.length; i++) {
			var divElement = document.createElement("div");
			var inputElement = document.createElement("input");
			inputElement.setAttribute("name", "location[]");
			if (i > 0) {
				inputElement.setAttribute("class", "submit");
			}
			inputElement.setAttribute("type", "checkbox");
			inputElement.setAttribute("value", locations[i]);
			divElement.appendChild(inputElement);
			var textNode = document.createTextNode(locations[i]);
			divElement.appendChild(textNode);
			locElement.appendChild(divElement);
		}
	}
</script>
</head>
<body>
	<div id="header"></div>
	<h2>Add Company</h2>
	<form id="form1" method="post" action="">
		<div class="form-row">
			<span class="label">Company Name:</span> <input type="text"
				name="cName" id="cId" />
		</div>
		<div class="form-row">
			<span class="label">Headquarters: </span><input type="text" name="hq"
				id="hqId">
		</div>
		<div class="form-row">
			<span class="label">Industry: </span><input type="text"
				name="industry" id="industryId">
		</div>
		<div class="form-row">
			<span class="label">Location: </span>

			<div id="locationId"></div>

		</div>
		<div class="form-row">
			<input class="submit" type="button" Value="Submit" onClick="addCompany()">
		</div>
	</form>
	
	<div class="form-row" id="result">
		<span class="label" id="resultSpan"></span>
	</div>
</body>
</html>